<template>
  <div>
    <!-- 当 orderItems 有数据时，展示订单列表 -->
    <div class="orders-container" v-if="orderItems.length">
      <div class="order-container" v-for="(order,index) in orderItems" :key="order.id">
        <!-- 订单头部 -->
        <div class="order-header">
          <span class="order-id">订单编号：{{ order.orderSn }}</span>
          <span class="order-status" :class="statusClass(order.orderStatus)">{{ order.orderStatus }}</span>
        </div>
        <!-- 商品信息 -->
        <div
            class="order-content"
            @click="goToProductDetail(order.orderSn)"
            style="cursor: pointer;"
        >
          <img class="product-image" :src="order.goodsimage" :alt="order.goodsname" />
          <div class="product-details">
            <h4 class="product-name">{{ order.goodsname }}</h4>
            <p class="product-sku">{{ order.goodsSkuName }}</p>
            <p class="product-price">￥{{ order.money }}</p>
            <p class="product-quantity">x{{ order.num }}</p>
          </div>
        </div>
        <!-- 订单底部 -->
        <div class="order-footer">
          <div class="order-total">
            <span>应付款：</span>
            <span class="total-price">￥{{ order.money }}</span>
          </div>
          <div class="order-actions">
            <button class="cancel-order" @click.stop="cancelOrderAction(order.orderSn)" >取消订单</button>
            <button class="pay-now" @click.stop="payNowAction(order.orderSn,index)" >去支付</button>
          </div>
        </div>
      </div>
    </div>
    <!-- 没有数据时显示暂无订单 -->
    <div class="no-orders" v-else>
      <!-- <img src="@/assets/images/empty/comment.png" alt="暂无订单" class="no-orders-image" /> -->
      <p class="no-orders-text">暂无订单</p>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "OrderPendingPaymentList",
  data() {
    return {
      orderItems: [], // 存储待付款订单
      apiBaseUrl: `${window.location.protocol}//${window.location.hostname}:8080`,
    };
  },
  created() {
    this.fetchorderPendingPayment(); // 组件创建时请求数据
  },
  methods: {
    // 获取待付款订单
    async fetchorderPendingPayment() {
      try {
        const response = await axios.get(`${this.apiBaseUrl}/api/order/infoidorderstatusall`, {
          params: {
            userId: localStorage.getItem("id"),
          },
          headers: {
            Authorization: "Bearer " + localStorage.getItem("token"),
            "Content-Type": "application/json",
          },
        });

        // 筛选出 orderStatus === '待付款' 的订单
        if (response.data && response.data.data) {
          this.orderItems = response.data.data.filter(order => order.orderStatus === "待付款");
        } else {
          this.orderItems = [];
        }
      } catch (error) {
        console.error("请求失败：", error);
        this.orderItems = [];
      }
    },
    async fetchPendingPaymentstatus(value) {
      try {
        const response = await axios.post(`${this.apiBaseUrl}/api/order/updateorderstatus`,
            { // 这里是请求体的内容
              ordersnid: value,
              status: 5
            },
            {
            headers: {
            Authorization: "Bearer " + localStorage.getItem("token"),
            "Content-Type": "application/json",
          },
        });
        return response.data
      } catch (error) {
        console.error("请求失败：", error);
        this.orderItems = [];
      }
    },
    cancelOrderAction(cancevalue) {
      this.fetchPendingPaymentstatus(cancevalue)
      location.reload()
    },
    payNowAction(orderid,index) {
      localStorage.setItem('orderid',orderid)
      // 计算所有订单的总价
      const totalPrice = this.orderItems[index].money
      this.$emit('orderselet');
      this.$emit('orderseletvalue', totalPrice);
    },
    // 状态样式
    statusClass(status) {
      switch (status) {
        case "待支付":
          return "status-pending";
        case "待发货":
          return "status-shipping";
        case "待收货":
          return "status-receiving";
        case "已收货":
          return "status-completed";
        case "已取消":
          return "status-cancelled";
        default:
          return "";
      }
    },
    // 跳转到商品详情
    goToProductDetail(orderid) {
      localStorage.setItem('orderid',orderid)
      this.$router.push({
        name: "OrderDetail"
      });
    },
  },
};
</script>

<style scoped>
.no-orders {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #666;
}

.no-orders-image {
  width: 150px;
  height: auto;
}

.no-orders-text {
  font-size: 16px;
}

.orders-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.order-container {
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  font-family: Arial, sans-serif;
}

.order-header {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
}

.order-status {
  font-weight: bold;
}

.status-pending {
  color: #FF7A45;
}

.status-shipping {
  color: #ff9800;
}

.status-receiving {
  color: #2196f3;
}

.status-completed {
  color: #4caf50;
}

.status-cancelled {
  color: #9e9e9e;
}

.order-content {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.product-image {
  height: 100px;
  width: 100px;
  object-fit: cover;
  border-radius: 8px;
  margin-right: 10px;
}

.product-details {
  flex: 1;
}

.product-name {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.product-price {
  font-size: 16px;
  color: #FF7A45;
}

.product-quantity {
  font-size: 14px;
  color: #666;
}

.order-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}

.order-total {
  font-weight: bold;
  color: #333;
}

.total-price {
  color: #FF7A45;
  font-size: 18px;
}

.order-actions {
  display: flex;
  gap: 10px;
}

.cancel-order,
.pay-now {
  border: none;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
}

.cancel-order {
  background-color: #ccc;
  color: #fff;
}

.cancel-order:hover {
  background-color: #b0b0b0;
}

.pay-now {
  background-color: #FF7A45;
  color: #fff;
}

.pay-now:hover {
  background-color: #e06c39;
}
</style>
